<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/front/include/taglib.jsp"%>

<!DOCTYPE html>
<html>
<head>
	<title>出勤率统计</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="${frontStatic}/js/jquery.min.js"></script>
	<script src="${ctxStatic}/My97DatePicker/WdatePicker.js"></script>
	<!-- 引入 ECharts 文件 -->
	<script src="${ctxStatic}/echarts3/echarts.js"></script>
	<!-- 引入 vintage 主题 -->
	<script src="${ctxStatic}/echarts3/theme/macarons.js"></script>
</head>
<style>
input,select {
	background: #fff;
	border: 1px solid #cccccc;
	padding: 5px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#submit{
	background: #39a8e8;
}
</style>
<body>
	<div>
		班级:&nbsp; <select id="classesId" name="classesId"
			style="height:30px;width:auto;" onchange="selectchange()">
			<option value="" selected="selected">请选择</option>
			<c:forEach items="${classList}" var="ddclasses">
				<option value="${ddclasses.classesId}">${ddclasses.classesName}</option>
			</c:forEach>
			<option value="all">全校</option>
		</select> &nbsp; <input id="date" name="date" type="text"
			readonly="readonly" maxlength="20" class="input-medium Wdate "
			required="required"
			value="<fmt:formatDate value="${date}" pattern="yyyy-MM-dd"/>"
			onclick="changeDate();" />
			&nbsp;<input id="submit" name="submit" onclick="toSubmit();" value=" 查 询 " type="button"/>
	</div>
	<div style="height:30px;"></div>
	<!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width:600px;height:500px;"></div>

	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'), 'macarons');
		var url = '${root}/dd/chart/ajax/getPieData.do';

		function changeDate() {
			//$("#classesId").val("");
			WdatePicker({
				dateFmt : 'yyyy-MM-dd',
				isShowClear : false
			});
		};

		function toSubmit(){
			postAjax();
		};
		function selectchange() {
			
		};

		function postAjax() {
			var classesId = $("#classesId").val();
			var date = $("#date").val();
			if (classesId == null | classesId == "") {
				return;
			}
			var postData = {
				"classesId" : classesId,
				"date" : date
			};
			$.ajax({
				url : url,
				type : "post",
				dataType : "json",
				data : postData,
				success : function(ret) {
					//alert(JSON.stringify(ret));
					var totalNum = ret.totalNum;
					var inSchoolNum_mon = ret.inSchoolNum_mon / 2;
					var leaveNum = ret.leaveNum;
					var nonSchoolNum_mon = totalNum - inSchoolNum_mon
							- leaveNum;
					option = {
						title : {
							text : '出勤率统计',
							subtext : ret.grade,
							x : 'center'
						},
						tooltip : {
							trigger : 'item',
							formatter : "{a} <br/>{b} : {c} ({d}%)"
						},
						legend : {
							orient : 'vertical',
							left : 'left',
							data : [ '已到', '未到', '请假' ]
						},
						color : [ '#6ba300', '#e41f11', '#ff9900' ],
						series : [ {
							name : '统计数据',
							type : 'pie',
							radius : '55%',
							center : [ '50%', '60%' ],
							data : [ {
								value : inSchoolNum_mon,
								name : '已到'
							}, {
								value : nonSchoolNum_mon,
								name : '未到'
							}, {
								value : leaveNum,
								name : '请假'
							} ],
							itemStyle : {
								emphasis : {
									shadowBlur : 10,
									shadowOffsetX : 0,
									shadowColor : 'rgba(0, 0, 0, 0.5)'
								}
							}
						} ]
					};
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				}
			});
		};

		/* 	// 指定图表的配置项和数据
		option = {
			title : {
				text : '出勤率统计',
				subtext : '纯属虚构',
				x : 'center'
			},
			tooltip : {
				trigger : 'item',
				formatter : "{a} <br/>{b} : {c} ({d}%)"
			},
			legend : {
				orient : 'vertical',
				left : 'left',
				data : [ '已到', '未到', '请假' ]
			},
			color:['#11EE3D','#F70909','#F7F709'],
			series : [ {
				name : '统计数据',
				type : 'pie',
				radius : '55%',
				center : [ '50%', '60%' ],
				data : [ {
					value : 335,
					name : '已到'
				}, {
					value : 310,
					name : '未到'
				}, {
					value : 234,
					name : '请假'
				}],
				itemStyle : {
					emphasis : {
						shadowBlur : 10,
						shadowOffsetX : 0,
						shadowColor : 'rgba(0, 0, 0, 0.5)'
					}
				}
			} ]
		};
		
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);   */
	</script>

</body>
</html>